//素材的添加和查找 分贴纸和模板
import { useState } from "react";
import './css/alter.css'
import UploadSti from './uploadSti'
import UploadTem from "./uploadTem";

const Alter = () => {
    const [val, setVal] = useState('');
    const [val2, setVal2] = useState('');
    const [res, setRes] = useState('');
    const [res2, setRes2] = useState('');
    const [img, setImg] = useState('');
    const [img2, setImg2] = useState('');
    const [tem, setTem] = useState('');
    const [sti, setSti] = useState('');
    //查找模板
    const searchTem = () => {
        if (val == '') {
            alert('请输入模板id');
            return
        }
        fetch(`https:www.h5fd.xyz:2021/test/template/${val}`)
            .then(res => res.text())
            .then(res => {
                var obj = JSON.parse(res);
                setRes(obj);
                setTem(obj);
                setImg(`https:www.h5fd.xyz:2021/test/image/${obj.template_cover}`)
            })
        setVal('');
    }
    //查找贴纸
    const searchSti = () => {
        if (val2 == '') {
            alert('请输入贴纸id');
            return
        }
        fetch(`https:www.h5fd.xyz:2021/test/sticker/${val2}`)
            .then(res =>res.text())
            .then(res => {
                var obj = JSON.parse(res);
                setRes2(obj)
                setSti(obj);
                setImg2(`https:www.h5fd.xyz:2021/test/image/${obj.sticker_name}`)
            })
        setVal2('');
    }
    // 删除部分
    const delTem = () => {
        fetch(`https:www.h5fd.xyz:2021/test/delTem/${tem.template_id}`)
            .then(res => res.text())
            .then(res => {
                if (res == 'success') {
                    alert('删除成功');
                    setRes('');
                }
            });
    }

    const delSti = () => {
        fetch(`https:www.h5fd.xyz:2021/test/delSti/${sti.sticker_id}`)
            .then(res => res.text())
            .then(res => {
                if (res == 'success') {
                    alert('删除成功');
                    setRes('');
                }
            });
    }

    const Tem = () => {
        return (
            <div className="alter-content moban">
                <UploadTem />
                <div className="altput">
                    <h2 className="h2">查找模板</h2>
                    <div>
                        <input placeholder="输入要查找的模板id" value={val} onChange={(e) => setVal(e.target.value)} />
                        <button className="altbtn" onClick={searchTem}>确定</button>
                    </div>
                    {
                        res ?
                            <div className="del">
                                <h2>模板结果</h2>
                                <div className="resBox">
                                    <img style={{ width: 150, height: 200 }} src={img} />
                                    <ul>
                                        <li>名字:{res.template_name}</li>
                                        <li>风格:{res.template_style}</li>
                                        <li>价格:{res.template_pay}</li>
                                        <button onClick={delTem}>删除</button>
                                    </ul>
                                </div>

                            </div>
                            : <div className="del">
                                <h2>模板结果</h2>
                                <div className="resBox">
                                    <div style={{ width: 150, height: 200, margin:'5px',border:'1px solid gray'  }}></div>
                                    <ul>
                                        <li>名字:{ }</li>
                                        <li>风格:{ }</li>
                                        <li>价格:{ }</li>
                                        <button onClick={delTem}>删除</button>
                                    </ul>
                                </div>

                            </div>
                    }
                </div>
            </div>
        )
    }
    const Sti = () => {
        return (
            <div className="alter-content tiezhi">
                <UploadSti />
                <div className="altput">
                    <h2 className="h2">查找贴纸</h2>
                    <div>
                        <input placeholder="输入要查找的贴纸id" value={val2} onChange={(e) => setVal2(e.target.value)} />
                        <button className="altbtn" onClick={searchSti}>确定</button>
                    </div>

                    {
                        res2 ?
                            <div className="del">
                                <h2>贴纸结果：</h2>
                                <div className="resBox">
                                    <img style={{ width: 100, height: 100 }} src={img2} />
                                    <ul>
                                        <li>名字:{res2.sticker_name}</li>
                                        <li>风格:{res2.sticker_style}</li>
                                        <li>价格:{res2.sticker_pay}</li>
                                        <button onClick={delSti}>删除</button>
                                    </ul>
                                </div>
                            </div>
                            : <div className="del">
                            <h2>贴纸结果：</h2>
                            <div className="resBox">
                                <div style={{ width: 100, height: 100, margin:'5px', border:'1px solid gray' }} ></div>
                                <ul>
                                    <li>名字:</li>
                                    <li>风格:</li>
                                    <li>价格:</li>
                                    <button onClick={delSti}>删除</button>
                                </ul>
                            </div>
                        </div>
                    }
                </div>
            </div>
        )
    }

    const [isShow, setShow] = useState(true);
    return (
        <div className="alter">
            <div className="pageBox">
                <div className="page" onClick={() => setShow(true)} style={isShow ? { width: '35px', backgroundColor: 'rgba(255,136,0,0.863)', color: 'white' } : {}}>模板</div>
                <div className="page" onClick={() => setShow(false)} style={isShow ? {} : { width: '35px', backgroundColor: 'rgba(255,136,0,0.863)', color: 'white' }}>贴纸</div>
            </div>
            {
                isShow ? <Tem /> : <Sti />
            }
        </div>
    )
}

export default Alter;